/**
 * 自适应图片处理工具
 * 
 * 功能：
 * 1. 根据设备分辨率创建不同尺寸的图片
 * 2. 自动为图片创建不同尺寸的版本
 * 3. 生成图片尺寸映射配置
 */

const fs = require('fs');
const path = require('path');
const { execSync } = require('child_process');

// 配置项
const config = {
  // 需要处理的图片目录
  imageDirs: [
    'images',
    'src/device_types/seawater_lamp/images',
    'src/device_types/freshwater_lamp/images'
  ],
  // 图片格式
  imageExts: ['.png', '.jpg', '.jpeg', '.webp'],
  // 要创建的尺寸版本
  sizes: [
    { name: 'small', width: 360, height: 0, quality: 85 },
    { name: 'medium', width: 720, height: 0, quality: 85 },
    { name: 'large', width: 1080, height: 0, quality: 85 }
  ],
  // 图片输出目录
  outputDir: 'images/adaptive',
  // 排除目录
  excludeDirs: ['node_modules', '.git', 'miniprogram_npm', 'webp-tools'],
  // 排除的文件名模式
  excludePatterns: ['placeholder', 'icon', 'logo']
};

// 自适应图片处理类
class AdaptiveImageHandler {
  constructor() {
    this.stats = {
      processed: 0,
      sizesCreated: 0,
      errors: 0
    };
    
    this.imageMap = new Map();
    this.checkDependencies();
  }

  // 检查依赖
  checkDependencies() {
    try {
      // 检查WebP工具
      if (process.platform === 'win32') {
        try {
          execSync('cwebp -version', { stdio: 'ignore' });
          console.log('✅ cwebp 已安装');
        } catch (e) {
          if (fs.existsSync('webp-tools/libwebp-1.5.0-windows-x64/bin/cwebp.exe')) {
            console.log('✅ 在项目目录中找到cwebp');
            process.env.PATH = `${process.env.PATH};${path.resolve('webp-tools/libwebp-1.5.0-windows-x64/bin')}`;
          } else {
            console.error('❌ 未找到cwebp，使用ImageMagick代替');
          }
        }
        
        // 检查ImageMagick
        try {
          execSync('magick -version', { stdio: 'ignore' });
          console.log('✅ ImageMagick 已安装');
        } catch (e) {
          console.warn('⚠️ 未安装ImageMagick，建议安装以获得更好的图片处理能力');
          console.warn('下载地址: https://imagemagick.org/script/download.php');
        }
      } else {
        // Linux/Mac检查
        try {
          execSync('convert -version', { stdio: 'ignore' });
          console.log('✅ ImageMagick 已安装');
        } catch (e) {
          console.warn('⚠️ 未安装ImageMagick，建议安装以获得更好的图片处理能力');
          console.warn('Mac: brew install imagemagick');
          console.warn('Linux: sudo apt install imagemagick');
        }
      }
    } catch (error) {
      console.error(`检查依赖时出错: ${error.message}`);
    }
  }

  // 递归查找图片文件
  findImageFiles() {
    console.log('🔍 扫描图片文件...');
    const imageFiles = [];

    for (const dir of config.imageDirs) {
      if (!fs.existsSync(dir)) {
        console.warn(`⚠️ 目录不存在: ${dir}`);
        continue;
      }
      
      this._findFilesRecursive(dir, config.imageExts, imageFiles);
    }
    
    console.log(`找到 ${imageFiles.length} 个图片文件`);
    return imageFiles;
  }

  // 递归查找文件辅助方法
  _findFilesRecursive(dir, extensions, fileList) {
    if (!fs.existsSync(dir)) return;
    
    const files = fs.readdirSync(dir);
    
    for (const file of files) {
      const filePath = path.join(dir, file);
      const stat = fs.statSync(filePath);
      
      if (stat.isDirectory() && !config.excludeDirs.some(excludeDir => filePath.includes(excludeDir))) {
        this._findFilesRecursive(filePath, extensions, fileList);
      } else if (stat.isFile() && extensions.includes(path.extname(filePath).toLowerCase())) {
        // 排除特定模式的文件名
        if (!config.excludePatterns.some(pattern => filePath.toLowerCase().includes(pattern))) {
          fileList.push(filePath);
        }
      }
    }
  }

  // 确保目录存在
  _ensureDirectoryExists(filePath) {
    const dirname = path.dirname(filePath);
    if (fs.existsSync(dirname)) {
      return true;
    }
    
    this._ensureDirectoryExists(dirname);
    fs.mkdirSync(dirname);
  }

  // 创建不同尺寸的图片
  createImageSizes(imagePath) {
    // 为每个尺寸创建图片版本
    const results = [];
    
    try {
      const ext = path.extname(imagePath).toLowerCase();
      const baseName = path.basename(imagePath, ext);
      const dirName = path.dirname(imagePath);
      
      // 生成每个尺寸的图片路径
      for (const size of config.sizes) {
        try {
          // 创建尺寸目录
          const sizeDir = path.join(config.outputDir, size.name);
          this._ensureDirectoryExists(path.join(sizeDir, 'dummy.txt'));
          
          // 保持原始目录结构
          const relativePath = path.relative('.', dirName);
          const outputDir = path.join(sizeDir, relativePath);
          this._ensureDirectoryExists(path.join(outputDir, 'dummy.txt'));
          
          // 输出图片路径
          const outputPath = path.join(outputDir, `${baseName}${ext}`);
          
          // 使用ImageMagick处理图片
          let resizeCommand;
          
          if (process.platform === 'win32') {
            // Windows下使用magick命令
            resizeCommand = `magick "${imagePath}" -resize ${size.width}x${size.height > 0 ? size.height : ''} -quality ${size.quality} "${outputPath}"`;
          } else {
            // Unix/Linux/Mac下使用convert命令
            resizeCommand = `convert "${imagePath}" -resize ${size.width}x${size.height > 0 ? size.height : ''} -quality ${size.quality} "${outputPath}"`;
          }
          
          execSync(resizeCommand, { stdio: 'ignore' });
          
          this.stats.sizesCreated++;
          
          console.log(`✅ 已创建 ${size.name} 尺寸: ${outputPath}`);
          
          results.push({
            size: size.name,
            width: size.width,
            path: outputPath,
            success: true
          });
        } catch (sizeError) {
          console.error(`❌ 处理尺寸 ${size.name} 失败: ${sizeError.message}`);
          this.stats.errors++;
          
          results.push({
            size: size.name,
            success: false,
            error: sizeError.message
          });
        }
      }
      
      // 记录原始图片和各尺寸版本的映射关系
      this.imageMap.set(imagePath, {
        original: imagePath,
        sizes: results.filter(r => r.success).map(r => ({
          name: r.size,
          width: r.width,
          path: r.path,
          relativePath: path.relative('.', r.path).replace(/\\/g, '/')
        }))
      });
      
      return true;
    } catch (error) {
      console.error(`❌ 处理图片 ${imagePath} 失败: ${error.message}`);
      this.stats.errors++;
      return false;
    }
  }

  // 生成图片尺寸映射文件
  generateImageMap() {
    // 创建图片尺寸映射文件
    // 规范化 imageMap 中的键（原始路径）和内部的 path、relativePath
    const normalizedImageMap = new Map();
    for (const [originalKey, value] of this.imageMap.entries()) {
      const normalizedKey = originalKey.replace(/\\/g, '/');
      const newValue = {
        ...value,
        original: value.original.replace(/\\/g, '/'),
        sizes: value.sizes.map(s => ({
          ...s,
          path: s.path.replace(/\\/g, '/'),
          // relativePath 已经是 / 分隔了，确保一下
          relativePath: s.relativePath.replace(/\\/g, '/') 
        }))
      };
      normalizedImageMap.set(normalizedKey, newValue);
    }

    const imageMapData = Object.fromEntries(normalizedImageMap);
    const imageMapJsonContent = JSON.stringify(imageMapData, null, 2);

    // 保存文件
    const outputFile = 'utils/image_size_map_data.json'; // 修改输出文件名和后缀
    fs.writeFileSync(outputFile, imageMapJsonContent);
    
    console.log(`✅ 已生成图片尺寸映射数据文件: ${outputFile}`);
    
    return outputFile;
  }

  // 生成自适应图片获取工具
  generateAdaptiveImageHelper() {
    const helperCode = `/**
 * 自适应图片助手
 * 
 * 根据设备屏幕尺寸自动选择合适的图片尺寸
 */

const imageSizeMap = require('./image_size_map');

/**
 * 获取自适应图片路径
 * @param {string} originalPath 原始图片路径
 * @return {string} 适合当前设备的图片路径
 */
function getAdaptiveImage(originalPath) {
  // 获取设备信息
  const systemInfo = wx.getSystemInfoSync();
  const screenWidth = systemInfo.windowWidth;
  
  // 使用图片尺寸映射获取合适的图片路径
  return imageSizeMap.getAdaptiveImagePath(originalPath, screenWidth);
}

/**
 * 为页面批量预处理图片路径
 * @param {Object} pageData 页面数据对象
 * @param {Array<string>} imageKeys 需要处理的图片字段名
 */
function adaptPageImages(pageData, imageKeys) {
  if (!pageData || !imageKeys || !Array.isArray(imageKeys)) return pageData;
  
  const systemInfo = wx.getSystemInfoSync();
  const screenWidth = systemInfo.windowWidth;
  
  const result = {...pageData};
  
  for (const key of imageKeys) {
    if (result[key]) {
      if (Array.isArray(result[key])) {
        // 处理图片数组
        result[key] = result[key].map(img => {
          if (typeof img === 'string') {
            return imageSizeMap.getAdaptiveImagePath(img, screenWidth);
          } else if (typeof img === 'object' && img.src) {
            // 如果是对象，且有src属性
            img.src = imageSizeMap.getAdaptiveImagePath(img.src, screenWidth);
            return img;
          }
          return img;
        });
      } else if (typeof result[key] === 'string') {
        // 处理单个图片字符串
        result[key] = imageSizeMap.getAdaptiveImagePath(result[key], screenWidth);
      } else if (typeof result[key] === 'object' && result[key].src) {
        // 处理包含src属性的对象
        result[key].src = imageSizeMap.getAdaptiveImagePath(result[key].src, screenWidth);
      }
    }
  }
  
  return result;
}

module.exports = {
  getAdaptiveImage,
  adaptPageImages
};`;

    // 保存文件
    const outputFile = 'utils/adaptive_image.js';
    fs.writeFileSync(outputFile, helperCode);
    
    console.log(`✅ 已生成自适应图片助手: ${outputFile}`);
    
    return outputFile;
  }

  // 创建使用文档
  generateUsageGuide() {
    const usageGuide = `# 自适应图片使用指南

## 简介

自适应图片系统能够根据用户设备的屏幕尺寸，自动加载最合适分辨率的图片，从而提升加载速度和用户体验。

## 使用方法

### 1. 基本用法

在页面中引入自适应图片助手:

\`\`\`javascript
const adaptiveImage = require('../../utils/adaptive_image');
\`\`\`

然后使用 \`getAdaptiveImage\` 方法获取适合当前设备的图片:

\`\`\`javascript
Page({
  data: {
    bannerImage: ''
  },
  
  onLoad() {
    // 加载适合当前设备的图片
    const adaptiveImagePath = adaptiveImage.getAdaptiveImage('images/banner.jpg');
    
    this.setData({
      bannerImage: adaptiveImagePath
    });
  }
});
\`\`\`

### 2. 批量处理图片

使用 \`adaptPageImages\` 方法一次性处理多个图片:

\`\`\`javascript
Page({
  data: {
    banner: 'images/banner.jpg',
    productImages: [
      'images/product1.jpg',
      'images/product2.jpg'
    ],
    background: {
      src: 'images/background.jpg',
      blur: true
    }
  },
  
  onLoad() {
    // 一次性处理多个图片路径
    const adaptedData = adaptiveImage.adaptPageImages(
      this.data, 
      ['banner', 'productImages', 'background']
    );
    
    this.setData(adaptedData);
  }
});
\`\`\`

### 3. 与延迟加载组件配合使用

可以与 \`lazy-image\` 组件结合使用:

\`\`\`html
<lazy-image
  src="{{adaptiveImage.getAdaptiveImage('images/large_photo.jpg')}}"
  width="100%"
  height="500rpx"
></lazy-image>
\`\`\`

或在页面JS中:

\`\`\`javascript
Page({
  data: {
    largeImage: ''
  },
  
  onLoad() {
    this.setData({
      largeImage: adaptiveImage.getAdaptiveImage('images/large_photo.jpg')
    });
  }
});
\`\`\`

然后在WXML中:

\`\`\`html
<lazy-image
  src="{{largeImage}}"
  width="100%"
  height="500rpx"
></lazy-image>
\`\`\`

## 优势

1. **提升加载速度**: 小屏设备加载小尺寸图片，减少数据传输
2. **节省流量**: 根据设备只加载必要的分辨率，避免浪费
3. **提升体验**: 图片加载更快，用户体验更佳
4. **降低成本**: 减少带宽使用，降低服务器负载和成本

## 技术说明

系统为每张图片创建了三种尺寸版本:

- 小型(small): 360px宽，适合小屏手机
- 中型(medium): 720px宽，适合普通手机
- 大型(large): 1080px宽，适合大屏设备

系统会根据用户设备的屏幕宽度自动选择最合适的图片尺寸。
`;

    // 保存使用指南
    const outputFile = 'docs/guides/adaptive_images.md';
    this._ensureDirectoryExists(outputFile);
    fs.writeFileSync(outputFile, usageGuide);
    
    console.log(`✅ 已生成使用指南: ${outputFile}`);
    
    return outputFile;
  }

  // 运行整个流程
  async run() {
    console.log('🚀 开始创建自适应图片...\n');
    
    // 1. 查找所有图片
    const imageFiles = this.findImageFiles();
    this.stats.processed = imageFiles.length;
    
    if (imageFiles.length === 0) {
      console.log('未找到需要处理的图片');
      return;
    }
    
    // 2. 为每个图片创建不同尺寸的版本
    console.log('\n📐 开始创建不同尺寸的图片...');
    for (const image of imageFiles) {
      this.createImageSizes(image);
    }
    
    // 3. 生成图片尺寸映射文件
    this.generateImageMap();
    
    // 4. 生成自适应图片助手
    this.generateAdaptiveImageHelper();
    
    // 5. 生成使用指南
    this.generateUsageGuide();
    
    // 6. 输出总结
    console.log('\n✨ 自适应图片处理完成!');
    console.log(`处理图片: ${this.stats.processed} 个`);
    console.log(`创建尺寸版本: ${this.stats.sizesCreated} 个`);
    console.log(`错误数量: ${this.stats.errors} 个`);
    
    // 7. 返回使用提示
    return `
自适应图片系统已创建完成!

1. 图片尺寸映射文件: utils/image_size_map_data.json
2. 自适应图片助手: utils/adaptive_image.js
3. 使用指南: docs/guides/adaptive_images.md

基本使用示例:

const adaptiveImage = require('../../utils/adaptive_image');

Page({
  data: {
    bannerImage: ''
  },
  
  onLoad() {
    this.setData({
      bannerImage: adaptiveImage.getAdaptiveImage('images/banner.jpg')
    });
  }
});

在WXML中:
<image src="{{bannerImage}}" mode="widthFix"></image>
`;
  }
}

// 命令行参数处理
function parseArgs() {
  const args = process.argv.slice(2);
  const options = {
    help: false,
    outputDir: config.outputDir
  };
  
  for (let i = 0; i < args.length; i++) {
    const arg = args[i];
    
    if (arg === '--output-dir' && i + 1 < args.length) {
      options.outputDir = args[++i];
    } else if (arg === '--help' || arg === '-h') {
      options.help = true;
    }
  }
  
  if (options.help) {
    console.log(`
自适应图片处理工具使用方法:

node utils/adaptive_image_handler.js [选项]

选项:
  --output-dir <路径>    指定输出目录
  --help, -h             显示帮助信息

示例:
  node utils/adaptive_image_handler.js --output-dir images/responsive
`);
    process.exit(0);
  }
  
  // 更新配置
  config.outputDir = options.outputDir;
  
  return options;
}

// 主函数
async function main() {
  // 解析命令行参数
  parseArgs();
  
  // 创建并运行处理器
  const handler = new AdaptiveImageHandler();
  await handler.run();
}

// 执行主函数
main().catch(error => {
  console.error(`❌ 执行出错: ${error.message}`);
  process.exit(1);
}); 